<template>
	<base-page bgColor="#F8F8F8">
		<block slot="header">
			<cu-custom :isBack="true" bgColor="bg-white">
				<block slot="content">
					<view class="text-center text-black ">醒目折扣</view>
				</block>
			</cu-custom>
		</block>

		<block slot="center">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback"
				:up="upOption" @up="upCallback">
				<view class="itemInfo">
					<view class="blockItems" v-for="(item,index) in list" :key="index" @click="goodsItemBtn(item)">
						<view class="itemImg">
							<image :src="item.sku_image || staticImgUrl+'home/load_img.png'" mode=""></image>
						</view>
						<view class="itemTitle">{{item.sku_name}}</view>
						<view class="itemPs">
							<view>
								<text class="priceNumT">￥</text>
								<text class="priceNum">{{item.topic_price}}</text>
							</view>
<!-- 							<view class="saleText">已售{{item.sale_num}}</view> -->
						</view>
					</view>
				</view>
			</mescroll-uni>
		</block>
		
	</base-page>
</template>

<script>
	import $Axios from '@/common/js/request/http.js';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		name: 'marked',
		data() {
			return {
				mescroll: null,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
						tip: '~ 空空如也 ~' // 提示
					}
				},
				topic_id:'',
				list:[]
			};
		},
		onLoad(e) {},
		onShow(e) {
			this.topic_id = this.$Router.queryObj().topic_id
		},
		created() {

		},
		methods: {
			// 初始化
			mescrollInit(e) {
				this.mescroll = e;
			},
			/*下拉刷新的回调 */
			downCallback(e) {
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调 */
			upCallback(page) {
				this.gettopicgoods(this.topic_id,page.num,10)
				this.mescroll.endSuccess(0);
			},
			gettopicgoods(topic_id,page,page_size){
				$Axios.post(`topic/api/topicgoods/page`,{
					topic_id:topic_id,
					page:page,
					page_size:page_size
				}).then(res=>{
					this.mescroll.endSuccess(res.list.length);
					if (res.list.length != 0) {
						if (page == 1) {
							this.page = 1
							this.list = []
							this.list = res.list
							this.mescroll.scrollTo(0)
						} else {
							this.list = this.list.concat(res.list)
							this.page = page
						}
					} else {
						this.list = []
					}
				})
			},
			goodsItemBtn(val) {
				this.$Router.push({
					path: '/publicPages/discountdetails/discountdetails',
					query: {
						id: val.id
					}
				});
			}
		},
		mounted() {}
	};
</script>

<style lang="scss" scoped>
	/deep/.mescroll-uni {
		height: 100% !important;
	}
	image {
		width: 100%;
		height: 100%;
	}

	.sousuoIcon {
		width: 38rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.topSelectClassify {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #F8F8F8;

		.classIifyTextActive {
			color: #FD3B5C !important;
		}

		.classifyText {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #87888E;
		}

		.priceupdown {
			width: 20rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}

		.pricesort {
			display: flex;
			align-items: center;
		}

	}

	.itemInfo {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-top: 20rpx;
		.blockItems {
			width: 332rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-left: 32rpx;
			margin-bottom: 20rpx;

			.itemImg {
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				width: 332rpx;
				height: 332rpx;
			}

			.itemTitle {
				width: 90%;
				margin: 18rpx auto;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			.itemPs {
				width: 90%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
			}

			.priceNumT {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF2342;
			}

			.priceNum {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF2342;
			}

			.saleText {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>
